import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Select, InputNumber } from 'antd';
import React from 'react';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import { ConfigListItem } from '../data';

export interface FormValueType extends Partial<ConfigListItem> {
  id?: number;
  name?: string;
  remark?: string;
  type?: string;
  nickname: string;
  rank_num?: string;
}

export interface UpdateFormProps extends FormComponentProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  values: Partial<ConfigListItem>;
  otherValues: any;
}
const FormItem = Form.Item;
const { TextArea } = Input;

export interface UpdateFormState {
  formVals: FormValueType;
  currentStep: number;
}

const UpdateForm: React.FC<UpdateFormProps> = props => {

    const { updateModalVisible, onSubmit: handleUpdate, onCancel, values, form, otherValues } = props;

    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        // form.resetFields();
        fieldsValue.id = values.id;
        handleUpdate(fieldsValue);
      });
    };

    console.log('values --->', values);

    return (
      <Modal
        destroyOnClose
        title="新增配置组"
        visible={updateModalVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'类型'}>
          {form.getFieldDecorator('type', {
            initialValue: values.type,
            rules: [{required: true, message: '类型不能为空'}],
          })(
          <Select
              allowClear = {true}
              showSearch = {true}
              optionFilterProp = 'children'
              placeholder={''}
              style={{width: '100%'}}
          >
              {
                otherValues.common.typeSelectOption && 
                otherValues.common.typeSelectOption.map((d:any) => <Select.Option key={d.key} value={(d.key).toString()}>{d.text}</Select.Option>
                )
              }
          </Select>
          )}
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'名称'}>
          {form.getFieldDecorator('name', {
            initialValue: values.name || '',
            rules: [{required: true, message: '名称不能为空'}],
          })(<Input placeholder="" />)}
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'描述'}>
          {form.getFieldDecorator('remark', {
            initialValue: values.remark || '',
            rules: [],
          })(<TextArea rows={2} placeholder="" />)}
        </FormItem>
  
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'变量标识'}>
            {form.getFieldDecorator('nickname', {
              initialValue: values.nickname || '',
              rules: [{required: true, message: '变量标识不能为空'}],
            })(<Input placeholder=""/>)}
          </FormItem>
  
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'排序'}>
          {form.getFieldDecorator('rank_num', {
            initialValue: values.rank_num || 888,
            rules: [{required: true, message: '排序不能为空'}],
          })(<InputNumber style={{width: '100%'}} placeholder={''} min={1} />)}
        </FormItem>
      </Modal>
    );

}

export default Form.create<UpdateFormProps>()(UpdateForm);
